<template>
  <div class="centre">
    <section class="inner_banner">
      <div class="picture_container">
        <img src="../../images/commoncard/swiperCard/nation.png" title="国家中心及省站inbanner" alt="国家中心及省站inbanner"
          class="inner_banner_pc">
        <!-- <img src="/uploads/image/20200509/1589053199.png" title="关于我们inbanner" alt="关于我们inbanner"
                    class="inner_banner_m"> -->
      </div>
    </section>
    <div class="nav">
      <div class="center flex flex_column_center   flex_row_strat">
        <div class="flex item">
          <i class="iconfont icon-zhuye-copy"></i>当前位置：<a href="/" title="">首页</a><span
            class="iconfont icon-jiantou_liebiaoxiangyou_o"></span><a @click="currentLoactiongo()"
            title="国家中心及省站">国家中心及省站</a><span class="iconfont icon-jiantou_liebiaoxiangyou_o"></span><a
            href="javascript:;" :title="currentLoaction" class="active" onclick="return false">{{
            currentLoaction }}</a>
        </div>
      </div>
    </div>
    <section class="center main1 clear_float">
      <div class="inner_left" ref="myElement">
        <div class="center">
          <div class="left">
            <div class="left_monu">
              <div class="title">
                <p class="cn">国家中心及省站</p>
                <p class="en">National Center and Provincial Station</p>
              </div>
              <div class="content">
                <ul>
                  <li ref="letfNews" v-for="(item, index) in nationalTree    " :key="index"
                    @click="clickNationTree(item, index)">
                    <a class="flex flex_column_center flex_row_justify stair" :title="item.title"><span class="flex1">{{
                        item.title }}</span><i class="iconfont icon-jiantou_liebiaoxiangyou_o"></i>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="left_tel">
              <img src="@/images/commoncard/qualityTel.png" alt="/服务质量监督ad2" title="/服务质量监督ad2">
            </div>
          </div>
        </div>
      </div>
      <div class="right" id="rightContent"  v-if="rightshow">
        <div class="right_title clear_float">
          <h3>{{ rightTitle }}</h3>
        </div>
        <div class="content rightcontent" v-html="rightcontent">
        </div>
      </div>
    </section>
  </div>
</template>
<script>

import scrollMixin from '@/mixins/scrollMixin';
import { config } from "@/common/config.js"
export default {
  mixins: [scrollMixin],
  data () {
    return {
      config,
      nationalTree: [],
      rightTitle: '',
      rightcontent: '',
      rightshow: false,
      currentLoaction: '',
      routerParam: {},
      scrollY: 0
    }
  },


    created () {
    this.init()
    this.routerParam = this.$route.query
  },
 
  watch: {
    $route: {
      handler (newVal, oldVal) {
        this.routerParam = newVal.query
        this.init()
      },
      immediate: true,
      deep: true // 深度监听对象的变化
    }
  },

  methods: {


    previewPic (code) {
      return config.url + config.prefix + '/file/previewFile?code=' + code
    },
    init () {
      this.getTree()
    },
    getTree () {
      let params = {
        tenantId: 1,
        id: 7
      }
      // 获取产品树
      this.$http.get(this.$api.nationsApi.listPlateCatAndChildren, params).then(res => {
        if (res.code == 200) {
          let result = []
          this.currentLoaction = res.data[0].title
          const objArray = res.data
          if (objArray.length > 0) {
            for (let [index, item] of objArray.entries()) {
              let detail = {}
              detail.id = item.id
              detail.title = item.title
              detail.bgPic = this.previewPic(item.bgPic)
              if (index == 0) {
                detail.active = true
              } else {
                detail.active = false
              }
              result.push(detail)

            }
          }
          this.nationalTree = result
          if (this.routerParam.title == undefined) {
            this.clickNationTree(this.nationalTree[0], 0)

          } else {

            this.clickNationTree(result[this.routerParam.index], this.routerParam.index)
          }


        }
      })
    },
    clickNationTree (data, index) {
      this.gotop()
      this.currentLoaction = data.title
      this.$nextTick(() => {
        this.$refs.letfNews[index].classList.add('active');
        for (let i = 0; i < this.$refs.letfNews.length; i++) {
          if (i != index) {
            this.$refs.letfNews[i].classList.remove('active');
          }
        }
      });
      this.rightTitle = data.title
      this.getdetail(data.id)
    },
    gotop() {
      window.scrollTo(0, 0)
    },
    //获取右边详情
    getdetail (data) {
      let params = {
        id: data
      }
      let _that = this
      this.$http.get(this.$api.nationsApi.getProdInfo, params).then(res => {
        if (res.code == 200) {
          _that.rightcontent = res.data.intro
          _that.rightshow = true

        }
      })
    },
    currentLoactiongo () {
      window.location.reload()
    }
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.handleScroll);
  }
}
</script>
<style scoped>
@import "@/styles/protion.scss";
.right{
    min-height: 800px !important;
}
.centre{
    background-color: #f4f4f4;
}
.nav{
    background-color: #f4f4f4;
}
.main1 .right{
    width: 75.83333%;
    background-color: #fff;
    padding: 50px;
}
</style>